<template>
  <Drawer :visible="visible" title="详情" size="large" @close="handleCancel">
    <template #footer>
      <Button key="back" @click="handleCancel">返回</Button>
    </template>
    <Form :model="form" label-width="150px">
      <Row>
        <Col :span="12">
          <FormItem label="租户名称">
            <span>{{ form.tenantName }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="应用名称">
            <span>{{ form.appName }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="实际使用时间(/天)">
            <span>{{ form.actualUsageTime }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="套餐生效时间">
            <span>{{ form.effectiveTime }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="套餐过期时间">
            <span>{{ form.expireTime }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="订单状态">
            <span>{{ form.orderStatus }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="套餐类型">
            <span>{{ form.packageType }}</span>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="付费类型">
            <span>{{ form.paymentType }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem label="状态">
            <span>{{ form.status }}</span>
          </FormItem>
        </Col>
      </Row>
      <Table :dataSource="form.actions" :columns="columns" :pagination="false"> </Table>
    </Form>
  </Drawer>
</template>
<script setup lang="ts">
import { Table, Drawer, Form, Row, Col, FormItem } from 'ant-design-vue';
import { defineProps, watch, ref, reactive } from 'vue';
import { getSdrDetail } from '/@/api/measurement-center/measurement-sdr/measurementment-sdr';
import { SdrDetailItem } from '/@/api/measurement-center/measurement-sdr/model/sdrModel';
const columns = [
  {
    title: '操作类型',
    dataIndex: 'type',
  },
  {
    title: '操作时间',
    dataIndex: 'time',
  },
  {
    title: '时长/月',
    dataIndex: 'duration',
  },
];
//接收父组件的值
let props = defineProps({
  record: Object,
  detailVisible: Boolean,
});
let visible = ref(props.detailVisible);
let propsRef = reactive(props);
const form = ref<Partial<SdrDetailItem>>({});
const emit = defineEmits(['cancelDetail']);

const handleCancel = function () {
  emit('cancelDetail', 'close');
};
async function getDetail() {
  let params = { id: props.record?.id, orderStatus: props.record?.orderStatus };
  form.value = await getSdrDetail(params);
}
watch(propsRef, (newValue) => {
  visible.value = newValue.detailVisible;
  if (newValue.detailVisible) {
    getDetail();
  }
});
</script>
